<template>
  <div class="flex flex-col">
      <a-card class="min-h-[68px] rounded"
              :body-style="{ padding: '0px 10px', minHeight: '700px' }"
              :bordered="false">
       
        <div class="card-box">
          <div class="card-left">
            <p class="left-title">
              {{ $t("user.verification-code.required11156611036") }}
            </p>
            <ul style="padding-left: 15px">
              <li v-for="(item, i) in chapterLists"
                  :key="item.title">
                <a-space align="center">
                  <a-badge status="processing"
                          style="margin-right: -40px; margin-bottom: 3px"
                          v-if="item.check" />
                  <a-button type="link"
                            @click="changeChapter(item, i)">{{ item.title }}
                  </a-button>
                </a-space>
              </li>
            </ul>
          </div>
          <!-- 主列表 -->
          <div class="card-right">
            <a-row>
              <a-space class="mb-[15px]">
                <div class="tags"></div>
                {{ $t("user.verification-code.required11156611037") }}
              </a-space>
              <div v-if="RpaNoPIOrImportantInvolved ==1 ">
                <p> Dear user, you do not need to answer the DPIA questionnaire since you have chosen No Personal Information or
                  Important Data Involved in your RPA. </p>
                <p>You can submit this request to DCO for approval, or go back to RPA to modify. </p>
              </div>

              <a-table ref="table"
                      v-if="RpaNoPIOrImportantInvolved ==0"
                      size="middle"
                      class="h-full overflow-x-auto mb-[80px]"
                      :pagination="dpiaSimpleAnswerPagination"
                      :dataSource="dpiaSimpleAnswerLists"
                      :rowKey="(record) => record.Id"
                      @change="tableChange"
                      width="150px"
                      :loading="listLoading">
                <!-- 题目 -->
                <a-table-column key="DpiaChapterTopic"
                                data-index="DpiaChapterTopic"
                                width="300px">
                  <span slot="title"
                        class="min-w-90p">{{
                    $t("user.verification-code.required11156611055")
                  }}</span>
                </a-table-column>

                <a-table-column key="DpiaChapterTopicAnswer"
                                data-index="DpiaChapterTopicAnswer">
                  <span slot="title"
                        class="min-w-90p">{{
                    $t("user.verification-code.required111566110056")
                  }}</span>  <!--回答问题--> 
                  <span key="DpiaChapterTopicAnswer"
                        slot-scope="text, record">
                    <span v-html="text"></span>
                    {{
                      record.DpiaChapterTopicType === 1 &&
                      record.DpiaChapterTopicRequired
                        ? `(${$t(
                            "user.verification-code.required111566110577666"
                          )}:${record.DpiaChapterTopicRequired})`
                        : ""
                    }}
                  </span> <!--补充内容--> 
                </a-table-column>
              </a-table>
              
              <!-- 2. -->
              <div>{{Question2Topic}}</div>
              <a-table ref="table"
                      v-if="RpaNoPIOrImportantInvolved ==0 && this.dpiaSimpleAnswerLists2.length > 0"
                      size="middle"
                      class="h-full overflow-x-auto mb-[80px]"
                      :pagination="dpiaSimpleAnswerPagination"
                      :dataSource="dpiaSimpleAnswerLists2"
                      :rowKey="(record) => record.Id"
                      @change="tableChange"
                      width="150px">
                <!-- 数据字段 -->
                <a-table-column key="SourceChildNames"
                                data-index="SourceChildNames"
                                >
                  <span slot="title"
                        class="min-w-90p">{{
                    $t("user.v122")
                  }}</span>
                </a-table-column>
                <!-- 处理目的及必要性 -->
                <a-table-column key="PurposeNecessityHandling"
                                data-index="PurposeNecessityHandling"
                              >
                  <span slot="title"
                        class="min-w-90p">{{
                    $t("user.v123")
                  }}</span>
                </a-table-column>
                <!-- 最小必要类型 -->
                <a-table-column key="MinimumNecessaryType"
                                data-index="MinimumNecessaryType"
                                >
                  <span slot="title"
                        class="min-w-90p">{{
                    $t("user.v124")
                  }}</span>
                </a-table-column>
                <!-- 通过何种途径取得个人同意 -->
                <a-table-column key="ObtainPersonalConsent"
                                data-index="ObtainPersonalConsent"
                                >
                  <span slot="title"
                        class="min-w-90p">{{
                    $t("user.v125")
                  }}</span>
                </a-table-column>
                <!-- 备注: -->
                <a-table-column key="remarks"
                                data-index="remarks"
                              >
                  <span slot="title"
                        class="min-w-90p">{{
                    $t("user.verification-code.required111566181")
                  }}</span>
                </a-table-column>
              </a-table>

            </a-row>
          </div>
        </div>
        <!-- 下方按钮 -->
        <div class="btns"
            :style="{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '20px 16px',
            background: '#fff',
            textAlign: 'center',
            zIndex: 1,
          }">
          <!-- 返回 -->
          <!-- <a-button type="primary"
                    @click="saveup()"
                    style="margin-right: 20px">
            {{ $t("app.setting.themecolor.rr") }}
          </a-button> -->
          <!-- 上一步 -->
          <a-button type="primary"
                    v-show="num != 0 && num != undefined"
                    @click="next(num--)"
                    style="margin-right: 20px">{{ $t("user.verification-code.required11156611057725911") }}</a-button>
          <!-- 下一模块 -->
          <a-button type="primary"
                    @click="next(num++)"
                    v-show="chapterLists.length - 1 > num">
            {{ $t("user.verification-code.required111566110577259") }}
          </a-button>
        </div>
      </a-card>
  </div>
</template>

<script>
import {
  dpiaQuestionChapterLists,
  dpiaQuestionInfo,
  dpiaSimpleAnswer,
  dpiaQuestionChangeStatus,
  dpiaSimpleAction,
} from '@/api/dpia/form'
// import RpaDetail from './components/rpaDetail.vue'
import { userQuery } from '@/api/common/form'
import { quesionFindRpaId, rpaDetail } from '@/api/rpa/form'

export default {
  props: {
    DpiaReviewId: {
      type: String,
    },
    visibleq: {
      type: Boolean,
    },
   
  },
  components: {
    // RpaDetail,
  },
  data() {
    return {
      // 章节答题内容
      columns: [
        {
          title: '题目',
          width: '440px',
          dataIndex: 'DpiaChapterTopic',
          align: 'center',
        },

        {
          title: '回答内容',
          className: 'min-w-30p',
          dataIndex: 'DpiaChapterTopicAnswer',
          align: 'center',
          scopedSlots: { customRender: 'dpiaChapterTopicAnswer' },
        },
      ],
      // Action内容
      actionColumns: [
        {
          title: 'Action编号',
          className: 'min-w-90p',
          dataIndex: 'DpiaActionIdTag',
          align: 'center',
        },
        {
          title: '合规要求名称',
          className: 'min-w-90p',
          dataIndex: 'DpiaActionName',
          align: 'center',
        },
        {
          title: 'Action来源',
          className: 'min-w-90p',
          dataIndex: 'DpiaActionSource',
          align: 'center',
        },
        {
          title: '责任人',
          className: 'min-w-90p',
          dataIndex: 'DpiaActionUserResponsible',
          align: 'center',
        },
        {
          title: '发起时间',
          className: 'min-w-90p',
          dataIndex: 'DpiaActionCreatetime',
          align: 'center',
        },
        {
          title: '合规要求描述',
          className: 'min-w-90p',
          dataIndex: 'DpiaActionResult',
          align: 'center',
        },
      ],
      dco: undefined,
      // DCO列表
      userList: [],
      // DCO按钮
      dcoButtom: false,

      // 上一页按钮控制
      previousPageButtom: true,

      // 下一页按钮控制
      nextPageButtom: true,

      value: '',
      visible: false,

      // 配置分页
      dpiaSimpleAnswerPagination: {
        page: 1,
        pageSize: 10,
        total: 0,
        current: 1,
      },
      dpiaSimpleActionPagination: {
        page: 1,
        pageSize: 1,
        total: 0,
      },

      // 左侧的章节列表
      chapterLists: [],

      // 基础答题信息
      questionnaireInfo: {},

      // 问题和答案数据
      dpiaQuestionTopicAnswer: {},

      // 问卷ID
      id: '',

      // 获取用户问题答案
      dpiaQuestionUserAnswer: {},

      // 当前题型
      topicType: 0,

      // 是否结束
      finishStatus: 0,

      // 已答题的结果
      dpiaQuestionUserLastAnswer: '',

      // 答题章节内容
      dpiaSimpleAnswerLists: [],
      dpiaSimpleAnswerLists2:[],

      // Action列表
      dpiaSimpleActionLists: [],

      //chapter Id
      chapterId: 0,

      //上一章/下一章
      num: 0,
      lang: localStorage.getItem('lang').includes('zh-CN'),
      //特殊题型
      RpaIfCompletedPIA: 0,
      RpaNoPIOrImportantInvolved: 0,
      Question2Topic:'',
      listLoading: false,
    }
  },
  created() {
    this.init()
  },
  watch:{
    visibleq() {

    }
  },
  mounted() {
    let that = this
    window.addEventListener('setItemEvent', function (e) {
      if (e.key == 'lang') {
        let lang = JSON.parse(e.value)
        if (lang == 'zh-EN') {
          that.lang = false
        } else {
          that.lang = true
        }
        that.changeChapter({ id: that.chapterId }, that.num)
      }
    })
  },
  methods: {
    async getList() {
      this.listLoading = true;
      try {
        // 默认获取第一章节
        const { data: dpiaSimpleAnswerObject } = await dpiaSimpleAnswer({
          id: this.DpiaReviewId,
          DpiaChapterId: this.chapterId,
          lang: this.lang ? 0 : 1,
          page: this.dpiaSimpleAnswerPagination.Page,
          pageSize: this.dpiaSimpleAnswerPagination.pageSize,
        })
        const { Page, PageSize, Total, Lists,Question2,Question2Topic } = dpiaSimpleAnswerObject
        this.dpiaSimpleAnswerLists = Lists
        this.dpiaSimpleAnswerLists2 = Question2
        this.Question2Topic = Question2Topic
        this.dpiaSimpleAnswerPagination = {
          page: Page,
          pageSize: PageSize,
          total: Total,
        }
      } catch (error) {
        console.log('error:', error)
        this.$message.error(error)
      }finally {
        this.listLoading = false;
      }
    },
    //分页的方法
    tableChange(e, searchInputs, pagination) {
      this.dpiaSimpleAnswerPagination.Page = e.current
      this.getList()
    },
    async changeChapter(items, i) {
      this.listLoading = true;
      if (i) {
        this.num = i
      }
      // 如果是新的章节，默认给它重置一下
      // 保障是首次分页
      // 因为Current默认有效，所以，在重置时记得把current重置为1
      if (items.id != this.chapterId) {
        this.dpiaSimpleAnswerPagination = {
          page: 1,
          pageSize: 10,
          total: 0,
          current: 1,
        }
      }
      this.chapterId = items.id

      try {
        // 默认获取第一章节
        const { data: dpiaSimpleAnswerObject } = await dpiaSimpleAnswer({
          id: this.DpiaReviewId,
          DpiaChapterId: items.id,
          lang: this.lang ? 0 : 1,
        })
        const { Page, PageSize, Total, Lists ,Question2 ,Question2Topic} = dpiaSimpleAnswerObject
        
        this.dpiaSimpleAnswerLists = Lists
        this.dpiaSimpleAnswerLists2 = Question2
        this.Question2Topic = Question2Topic
        // this.RpaIfCompletedPIA = rpaDetailInfo.RpaIfCompletedPIA
        // this.RpaNoPIOrImportantInvolved =
        //   rpaDetailInfo.RpaNoPIOrImportantInvolved
        if (this.RpaIfCompletedPIA == 1) {
          this.dpiaSimpleAnswerLists[0].DpiaChapterTopicAnswer =
            this.RpaPIALinkUrl
        }
        this.dpiaSimpleAnswerPagination = {
          page: Page,
          pageSize: PageSize,
          total: Total,
        }

        const { page, pageSize } = this.dpiaSimpleActionPagination
        // 默认获取第一章节
        const { data: dpiaSimpleActionObject } = await dpiaSimpleAction({
          Id: this.DpiaReviewId,
          ChapterId: this.chapterId,
          page,
          pageSize,
        })
        const {
          Page: page1,
          PageSize: pageSize1,
          Total: total1,
          Lists: Lists1,
        } = dpiaSimpleActionObject

        this.dpiaSimpleActionLists = Lists1
        this.dpiaSimpleActionPagination = {
          page: page1,
          pageSize: pageSize1,
          total: total1,
        }
      } catch (error) {
        console.log('error:', error)
        this.$message.error(error)
      } finally {
        this.listLoading = false;
      }
    },
    async actions() {
      this.listLoading = true;
      // 获取关联的Action
      try {
        const { page, pageSize } = this.dpiaSimpleActionPagination
        // 默认获取第一章节
        const { data: dpiaSimpleActionObject } = await dpiaSimpleAction({
          Id: this.DpiaReviewId,
          ChapterId: this.chapterId,
          page,
          pageSize,
        })
        const { Page, PageSize, Total, Lists } = dpiaSimpleActionObject
        this.dpiaSimpleActionLists = Lists
        this.dpiaSimpleActionPagination = {
          page: Page,
          pageSize: PageSize,
          total: Total,
        }
      } catch (error) {
        console.log('error:', error)
        this.$message.error(error)
      }finally {
        this.listLoading = false;
      }
    },

    async init() {
      this.listLoading = true;
      this.chapterId = 0
      try {
        // 初始化题库
        // var id = this.$route.query.id
        // this.id = id
        const { data: rpaDetails } = await quesionFindRpaId({ Id: this.DpiaReviewId })
        // 获取RPA详情
        const { data: rpaDetailInfo } = await rpaDetail({
          Id: rpaDetails.DpiaRpaId,
        })
        this.RpaPIALinkUrl = rpaDetailInfo.RpaPIALinkUrl
        this.RpaIfCompletedPIA = rpaDetailInfo.RpaIfCompletedPIA
        this.RpaNoPIOrImportantInvolved =
          rpaDetailInfo.RpaNoPIOrImportantInvolved
        // 章节列表
        const { data: chapterLists } = await dpiaQuestionChapterLists({
          id: this.DpiaReviewId,
        })
        this.chapterLists = chapterLists

        // 默认获取第一章节q1
        await this.changeChapter({ id: this.chapterLists[0].id })

        // 获取初步评估Action
        await this.actions()

        // 基础信息查询
        const { data: questionnaireInfo } = await dpiaQuestionInfo({
          id: this.DpiaReviewId,
        })
        this.questionnaireInfo = questionnaireInfo
      } catch (error) {
        console.log('error:', error)
        this.$message.error(error)
      }finally {
        this.listLoading = false;
      }
    },
    //返回
     saveup() {
      console.log('我想返回');
      this.visibleq = false;
    },

    async next() {
      let items = null
      if (this.num < this.chapterLists.length) {
        items = this.chapterLists[this.num]
      }

      if (items.id != this.chapterId) {
        this.dpiaSimpleAnswerPagination = {
          page: 1,
          pageSize: 10,
          total: 0,
          current: 1,
        }
      }

      try {
        this.chapterId = items.id
        // 默认获取第一章节
        const { data: dpiaSimpleAnswerObject } = await dpiaSimpleAnswer({
          id: this.DpiaReviewId,
          DpiaChapterId: items.id,
          lang: this.lang ? 0 : 1,
        })
        const { Page, PageSize, Total, Lists,Question2 ,Question2Topic} = dpiaSimpleAnswerObject
        
        this.Question2Topic = Question2Topic
        this.dpiaSimpleAnswerLists = Lists
        this.dpiaSimpleAnswerLists2 = Question2
        this.dpiaSimpleAnswerPagination = {
          page: Page,
          pageSize: PageSize,
          total: Total,
        }

        const { page, pageSize } = this.dpiaSimpleActionPagination
        // 默认获取第一章节
        const { data: dpiaSimpleActionObject } = await dpiaSimpleAction({
          Id: this.DpiaReviewId,
          ChapterId: this.chapterId,
          page,
          pageSize,
        })
        const {
          Page: page1,
          PageSize: pageSize1,
          Total: total1,
          Lists: Lists1,
        } = dpiaSimpleActionObject

        this.dpiaSimpleActionLists = Lists1
        this.dpiaSimpleActionPagination = {
          page: page1,
          pageSize: pageSize1,
          total: total1,
        }
      } catch (error) {
        console.log('error:', error)
        this.$message.error(error)
      }
    },

    rollback() {
      this.visibleq =false;
    },

  },
}
</script>

<style lang="less" scoped>
/deep/.ant-card-body {
  // display: flex;

  .buttomm {
    width: 100%;
  }

  .card-box {
    font-size: 15.5px;
    display: flex;
  }

  .card-left {
    /*rectangle copy 4备份 87*/
    margin: 20px 30px 20px 20px;
    color: #444e84;
    left: 339px;
    top: 287px;
    width: 388px;
    min-height: 415px;
    opacity: 0.67;
    border-radius: 2px;
    background: #f7faff;

    ul {
      margin-top: 10px;
    }

    ul li {
      padding: 3px;
    }
  }

  .left-title {
    color: #050c34;
    width: 100%;
    line-height: 40px;
    padding: 0 10px;
    padding-left: 20px;
    background: #e7f0ff;
    border-bottom: 1px solid #ddd;
  }

  .card-right {
    width: 100%;
  }

  p {
    color: #000;
  }
}

.tags {
  left: 298px;
  top: 288px;
  width: 6px;
  height: 14px;
  opacity: 1;
  border-radius: 2px;
  background: rgba(0, 80, 247, 1);
}
:deep .ant-drawer-body {
  padding: 0;
}
</style>